{extend name="base"/}
{block name="resources"}
<style>
    .install-content-procedure .content-procedure-item:first-of-type {
        background: url("{$INSTALL_IMG}/complete_two.png") no-repeat center / contain;
        color: #fff;
    }

    .install-content-procedure .content-procedure-item:nth-child(2) {
        background: url("{$INSTALL_IMG}/complete_four.png") no-repeat center / contain;
        color: #fff;
    }

    .install-content-procedure .content-procedure-item:nth-child(3) {
        background: url("{$INSTALL_IMG}/conduct.png") no-repeat center / contain;
        color: #fff;
    }

    .layui-form select {
        display: block;
    }
</style>
{/block}

{block name="main"}
<div id='postloader' class='waitpage'></div>
<form class="layui-form">
    <div class="testing parameter">
        <div class="testing-item">
            <h3>数据库设定</h3>
            <table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
                <tr>
                    <td class="onetd"><span class="required">*</span>数据库主机：</td>
                    <td>
                        <input name="dbhost" id="dbhost" type="text" lay-verify="empty" placeholder="请输入数据库主机地址"
                               value="127.0.0.1" class="input-txt"/>
                        <small>一般为127.0.0.1</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span>Mysql端口：</td>
                    <td>
                        <input name="dbport" id="dbport" type="text" value="3306" class="input-txt" lay-verify="empty"
                               placeholder="请输入Mysql端口"/>
                        <small>一般为3306</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span>数据库用户：</td>
                    <td>
                        <input name="dbuser" id="dbuser" type="text" value="" class="input-txt" lay-verify="empty"
                               placeholder="请输入数据库用户"/>
                        <small>默认root</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span>数据库密码：</td>
                    <td>
                        <div style='float:left;margin-right:3px;'>
                            <input name="dbpwd" id="dbpwd" type="text" value=""  class="input-txt" onChange="testDb()"
                                   lay-verify="empty" placeholder="请输入数据库密码"/>
                        </div>
                        <div style='float:left' class="mysql-message" id='dbpwdsta'></div>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span>数据库名称：</td>
                    <td>
                        <div style='float:left;margin-right:3px;'><input name="dbname" id="dbname" type="text" value=""
                                                                         class="input-txt" onChange="haveDB()"
                                                                         lay-verify="empty" placeholder="请输入数据库名称"/>
                        </div>
                        <div style='float:left;' class="mysql-message" id='havedbsta'></div>
                    </td>
                </tr>
                <tr>
                <td class="onetd">数据表前缀：</td>
                <td>
                <div style='float:left;margin-right:3px;'><input name="dbprefix" id="dbprefix" type="text" value="mn_" class="input-txt" placeholder="请输入数据表前缀"/></div>
                </td>
                </tr>


                <tr>
                    <td class="onetd">数据库编码：</td>
                    <td>
                        <div style='float:left;'>
                            <select name="charset" class="input-txt" style="width: 193px;">
                                <option value="utf8mb4" selected>utf8mb4</option>
                                <option value="utf8">utf8</option>
                            </select>
                        </div>
                        <div style='float:left;' class="mysql-message">
                            <small>默认utf8mb4编码(utf8mb4的最低mysql版本支持版本为5.5.3+)</small>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div class="testing-item">
            <h3>redis设定</h3>
            <table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
                <tr>
                    <td class="onetd"><span class="required">*</span>Redis主机：</td>
                    <td>
                        <input name="rhost" id="rhost" type="text" lay-verify="empty" placeholder="请输入redis主机"
                               value="127.0.0.1" class="input-txt"/>
                        <small>一般为127.0.0.1</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span>Redis端口：</td>
                    <td>
                        <input name="rport" id="rport" type="text" value="6379" class="input-txt" lay-verify="empty"
                               placeholder="请输入Redis端口"/>
                        <small>一般为6379</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd">Redis密码：</td>
                    <td>
                        <div style='float:left;margin-right:3px;'>
                            <input name="rpwd" id="rpwd" type="text"  value="" class="input-txt" onChange="testRDb()"
                                   placeholder="请输入Redis密码"/>
                        </div>
                        <div style='float:left' class="mysql-message" id='rpwdsta'></div>
                    </td>
                </tr>
                <tr>
                    <td class="onetd">Redis数据库名：</td>
                    <td>
                        <div style='float:left;margin-right:3px;'><input name="rname" id="rname" type="text" value="0"
                                                                         class="input-txt" onChange="haveRDB()"
                                                                         lay-verify="empty" placeholder="默认为0"/></div>
                        <div style='float:left' class="mysql-message" id='haversta'></div>
                    </td>
                </tr>
                <tr>
                    <td class="onetd">Redis前缀：</td>
                    <td>
                        <input name="rprefix" id="rprefix" type="text" value="mn_" class="input-txt"
                               placeholder="请输入Redis前缀"/>
                        <small>同一Redis服务器不同站点应设置不同的值，区分不同的站点。也可以跳过后续需要时在env配置文件中自行更改</small>
                    </td>
                </tr>
            </table>
        </div>

        <div class="testing-item">
            <h3>网站设定</h3>
            <table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
                <tr>
                    <td class="onetd"><span class="required">*</span><strong>管理员用户名：</strong></td>
                    <td><input name="username" id="username" type="text" value="" class="input-txt" lay-verify="empty"
                               placeholder="请输入平台用户名"/>
                        <small id="mess_username">管理员用户名 必填</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span><strong>管理员密码：</strong></td>
                    <td><input name="password" id="password" type="password" value="" class="input-txt"
                               lay-verify="empty" placeholder="请输入平台密码"/>
                        <small id="mess_password">密码 必填</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span><strong>确认密码：</strong></td>
                    <td><input name="password2" id="password2" type="password" value="" class="input-txt"
                               lay-verify="empty" placeholder="请输入平台确认密码"/>
                        <small id="mess_password2">确认密码 必填</small>
                    </td>
                </tr>
                <tr>
                    <td class="onetd"><span class="required">*</span><strong>导入城市字典：</strong></td>
                    <td>
                        <div style='float:left;'><select name="city" class="input-txt" style="width: 193px;">
                            <option value="1">是</option>
                            <option value="0" selected>否</option>
                        </select></div>
                        <div style='float:left;' class="mysql-message">
                            <small>城市字典表SQL过大，IO耗时长，低性能服务器不推荐导入，可极大缩短安装时间，但后续用到时需要自行导入数据库</small>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div class="btn-box"></div>

        <div class="btn-box">
            <input type="button" class="btn-back" value="后退"
                   onclick="window.location.href='{$root_url}/install.php/index/index?step=2'"/>
            <input type="button" class="btn-next" lay-submit lay-filter="install" value="开始安装" id="form_submit">
        </div>
    </div>
</form>

{/block}
{block name='script'}
<script language="javascript" type="text/javascript">
    ControlContent(2);
    var is_existdb = 1;//数据库是否存在
    var is_existrdb = 1;//rides是否存在
    var message = '数据库账号或密码不能为空';
    var r_message = 'Redis数据库或密码不能为空';

    function inputBoxPointer(id) {
        return document.getElementById(id);
    }

    var is_install = false;
    layui.use('form', function () {
        var form = layui.form;
        form.verify({
            empty: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value == '') {
                    var msg = $(item).attr("placeholder");
                    return msg;
                }
            }

        });
        form.on('submit(install)', function (data) {
            if (is_existdb == 2) {
                layer.confirm('数据库存在，系统将覆盖数据库!', {
                    btn: ['继续', '取消'] //按钮
                }, function () {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    install(data.field);

                }, function () {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    return false;
                });
            } else {
                install(data.field);
            }

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        function install(data) {

            if (is_install) {
                return false;
            }
            if (data.city == 0) {
                layer.confirm('本次安装将不导入城市字典数据，后续如果需要可在目录/app/manage/source/city/datebase.sql 找到，或是在【城市数据】管理页面下载sql ，自行在数据库执行。', {
                    btn: ['继续', '取消'] //按钮
                }, function () {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    build_install(data);
                }, function () {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    return false;
                });
            } else {
                build_install(data);
            }
        }

        function build_install(data) {

            document.getElementById('form_submit').disabled = true;
            $("#form_submit").val("正在安装...");
            $("#form_submit").addClass("installimg-btn");
            var index = layer.load(2);
            is_install = true;
            //打开一个弹窗
            var install_index = layer.open({
                type: 2,
                title: '正在执行安装，时间较长，过程中请勿关闭本页面...',
                closeBtn: 0, //不显示关闭按钮
                shade: [0],
                area: ['640px', '415px'],
                offset: 'rb', //右下角弹出
                anim: 2,
                content: ['/install.php/index/process'], //iframe的url，no代表不显示滚动条
            });

            $.ajax({
                url: "/install.php/index/index?step=4",
                data: data,
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    layer.close(index);
                    layer.close(install_index);
                    if (data.data.errcode < 0) {
                        error(data.msg);
                        is_install = false;
                        document.getElementById('form_submit').disabled = false;
                        $("#form_submit").val("开始安装");
                        $("#form_submit").removeClass("installimg-btn");
                    } else {
                        // window.location.href = '{$root_url}'
                        window.location.href = '{$root_url}/install.php/index/installSuccess'
                    }
                }
            })
        }
    });

    //数据库连接测试
    function testDb() {
        var dbhost = inputBoxPointer('dbhost').value;
        var dbuser = inputBoxPointer('dbuser').value;
        var dbpwd = inputBoxPointer('dbpwd').value;
        var dbport = inputBoxPointer('dbport').value;
        inputBoxPointer('dbpwdsta').innerHTML = '<img src="{$INSTALL_IMG}/ajax-loader.gif">';
        $.ajax({ //post也可
            url: '/install.php/index/testdb',
            data: {dbhost: dbhost, dbport: dbport, dbuser: dbuser, dbpwd: dbpwd},
            type: "post",
            dataType: 'json',
            success: function (data) {
                if (data.data.errcode >= 0) {
                    is_existdb = data.data.data.status;
                    if (is_existdb < 0) {
                        var str = "<span style='color: red'>" + data.data.data.message + "</span>";
                        inputBoxPointer('dbpwdsta').innerHTML = str;
                    } else if (is_existdb == 1) {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('dbpwdsta').innerHTML = str;
                    } else {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('dbpwdsta').innerHTML = str;
                    }
                }
            }
        });
    }


    //数据库连接测试
    function testRDb() {
        var rhost = inputBoxPointer('rhost').value;
        var rpwd = inputBoxPointer('rpwd').value;
        var rport = inputBoxPointer('rport').value;
        inputBoxPointer('rpwdsta').innerHTML = '<img src="{$INSTALL_IMG}/ajax-loader.gif">';
        $.ajax({ //post也可
            url: '/install.php/index/testrdb',
            data: {rhost: rhost, rport: rport, rpwd: rpwd},
            type: "post",
            dataType: 'json',
            success: function (data) {
                if (data.data.errcode >= 0) {
                    is_existdb = data.data.data.status;
                    if (is_existdb < 0) {
                        var str = "<span style='color: red'>" + data.data.data.message + "</span>";
                        inputBoxPointer('rpwdsta').innerHTML = str;
                    } else if (is_existdb == 1) {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('rpwdsta').innerHTML = str;
                    } else {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('rpwdsta').innerHTML = str;
                    }
                }
            }
        });
    }


    /**
     *验证数据库是否存在
     */
    function haveDB() {
        var dbhost = inputBoxPointer('dbhost').value;
        var dbname = inputBoxPointer('dbname').value;
        var dbuser = inputBoxPointer('dbuser').value;
        var dbpwd = inputBoxPointer('dbpwd').value;
        var dbport = inputBoxPointer('dbport').value;
        inputBoxPointer('havedbsta').innerHTML = '<img src="{$INSTALL_IMG}/ajax-loader.gif">';

        $.ajax({ //post也可
            url: '/install.php/index/testdb',
            data: {dbhost: dbhost, dbport: dbport, dbuser: dbuser, dbpwd: dbpwd, dbname: dbname},
            type: "post",
            dataType: 'json',
            success: function (data) {
                if (data.data.errcode >= 0) {
                    is_existdb = data.data.data.status;
                    if (is_existdb < 0) {
                        var str = "<span style='color: red'>" + data.data.data.message + "</span>";
                        inputBoxPointer('dbpwdsta').innerHTML = str;
                    } else if (is_existdb == 1) {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('dbpwdsta').innerHTML = str;
                    } else {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('havedbsta').innerHTML = str;
                    }
                }
            }
        });

    }

    /**
     *验证数据库是否存在
     */
    function haveRDB() {
        var rhost = inputBoxPointer('rhost').value;
        var rpwd = inputBoxPointer('rpwd').value;
        var rport = inputBoxPointer('rport').value;
        var rname = inputBoxPointer('rname').value;
        inputBoxPointer('haversta').innerHTML = '<img src="{$INSTALL_IMG}/ajax-loader.gif">';

        $.ajax({ //post也可
            url: '/install.php/index/testrdb',
            data: {rhost: rhost, rport: rport, rpwd: rpwd, rname: rname},
            type: "post",
            dataType: 'json',
            success: function (data) {
                if (data.data.errcode >= 0) {
                    is_existdb = data.data.data.status;
                    if (is_existdb < 0) {
                        var str = "<span style='color: red'>" + data.data.data.message + "</span>";
                        inputBoxPointer('haversta').innerHTML = str;
                    } else if (is_existdb == 1) {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('haversta').innerHTML = str;
                    } else {
                        var str = "<span style='color: green'>" + data.data.data.message + "</span>";
                        inputBoxPointer('haversta').innerHTML = str;
                    }
                }
            }
        });

    }
</script>
{/block}